<template>
  <div>
    <a-card title="重修规则设置">
      <a-form :form="form" @submit="handleSubmit">
        <a-form-item label="重修报名开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['startTime', { rules: [{ required: true, message: '请选择开始时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="重修报名结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['endTime', { rules: [{ required: true, message: '请选择结束时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="重修选课开始时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['selectStartTime', { rules: [{ required: true, message: '请选择开始时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="重修选课结束时间" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-date-picker
            v-decorator="['selectEndTime', { rules: [{ required: true, message: '请选择结束时间' }] }]"
            show-time
            format="YYYY-MM-DD HH:mm:ss"
          />
        </a-form-item>
        <a-form-item label="重修费用(元/学分)" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-input-number
            v-decorator="['feePerCredit', { rules: [{ required: true, message: '请输入重修费用' }] }]"
            :min="0"
            :step="10"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item label="重修次数限制" :label-col="{ span: 6 }" :wrapper-col="{ span: 12 }">
          <a-input-number
            v-decorator="['maxRetakeTimes', { rules: [{ required: true, message: '请输入重修次数限制' }] }]"
            :min="1"
            :max="5"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
          <a-button type="primary" html-type="submit">保存设置</a-button>
        </a-form-item>
      </a-form>
    </a-card>
    
    <a-card title="当前重修规则" style="margin-top: 20px">
      <a-table :columns="ruleColumns" :dataSource="ruleData" :pagination="false">
        <template slot="operation" slot-scope="text, record">
          <a @click="editRule(record)">编辑</a>
          <a-divider type="vertical" />
          <a @click="deleteRule(record)">删除</a>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
const ruleColumns = [
  {
    title: '学期',
    dataIndex: 'semester',
    key: 'semester'
  },
  {
    title: '报名时间',
    dataIndex: 'applyTimeRange',
    key: 'applyTimeRange'
  },
  {
    title: '选课时间',
    dataIndex: 'selectTimeRange',
    key: 'selectTimeRange'
  },
  {
    title: '重修费用(元/学分)',
    dataIndex: 'feePerCredit',
    key: 'feePerCredit'
  },
  {
    title: '重修次数限制',
    dataIndex: 'maxRetakeTimes',
    key: 'maxRetakeTimes'
  },
  {
    title: '操作',
    key: 'operation',
    scopedSlots: { customRender: 'operation' }
  }
]

export default {
  beforeCreate() {
    this.form = this.$form.createForm(this)
  },
  data() {
    return {
      ruleColumns,
      ruleData: [
        {
          key: '1',
          semester: '2022-2023学年第二学期',
          applyTimeRange: '2023-03-01 08:00:00 至 2023-03-15 17:00:00',
          selectTimeRange: '2023-03-16 08:00:00 至 2023-03-25 17:00:00',
          feePerCredit: 80,
          maxRetakeTimes: 3
        },
        {
          key: '2',
          semester: '2022-2023学年第一学期',
          applyTimeRange: '2022-09-01 08:00:00 至 2022-09-15 17:00:00',
          selectTimeRange: '2022-09-16 08:00:00 至 2022-09-25 17:00:00',
          feePerCredit: 80,
          maxRetakeTimes: 3
        }
      ]
    }
  },
  methods: {
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log('Received values of form: ', values)
          this.$message.success('重修规则保存成功')
        }
      })
    },
    editRule(record) {
      console.log('编辑:', record)
      // 这里应该解析时间范围并设置表单值
      this.form.setFieldsValue({
        feePerCredit: record.feePerCredit,
        maxRetakeTimes: record.maxRetakeTimes
      })
    },
    deleteRule(record) {
      this.$confirm({
        title: '确认删除这条重修规则吗?',
        content: '删除后将无法恢复',
        onOk: () => {
          this.ruleData = this.ruleData.filter(item => item.key !== record.key)
          this.$message.success('删除成功')
        }
      })
    }
  }
}
</script>